<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 999;
        }
        .modal{
            z-index: 1000;
            position: fixed;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            background-color: white;
            margin-left: -200px;
            margin-top: -150px;
        }
        a{
            cursor: pointer;
        }
    </style>
</head>
<body>
     <div style="width: 700px;margin: 50px auto;">
        <h1>班级列表</h1>
        <div style="margin: 10px;">
            <a href="/add_class/" class="btn btn-primary">添加</a>
            <a onclick="showModal();" class="btn btn-primary">对话框添加</a>
        </div>

        <table border="1" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>班级名称</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for row in class_list %}
                    <tr>
                        <td>{{ row.id }}</td>
                        <td>{{ row.title }}</td>
                        <td>
                            <a href="/edit_class/?nid={{ row.id }}" class="glyphicon glyphicon-pencil"></a>
                            |
                            <a onclick="modelEdit(this);">对话框编辑</a>
                            |
                            <a href="/del_class/?nid={{ row.id }}" class="glyphicon glyphicon-trash"></a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="shadow" class="shadow hide"></div>
    <div id="modal" class="modal hide">
        <p>
            <input id="title" type="text" name="title" />
        </p>
        <input type="button" value="提交" onclick="AjaxSend();"  /><span id="errormsg"></span>
        <input type="button" value="取消" onclick="cancleModal();"  />

    </div>

    <div id="editModal" class="modal hide">
        <h3>编辑框</h3>
        <p>
            <input id="editId" type="text" name="id" style="display: none" />
            <input id="editTitle" type="text" name="title" />
        </p>
        <input type="button" value="提交" onclick="editAjaxSend();"  /><span id="errormsg"></span>
        <input type="button" value="取消" onclick="cancleModal();"  />

    </div>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function showModal(){
            document.getElementById('shadow').classList.remove('hide');
            document.getElementById('modal').classList.remove('hide');
        }

        function cancleModal(){
            document.getElementById('shadow').classList.add('hide');
            document.getElementById('modal').classList.add('hide');
            document.getElementById('editModal').classList.add('hide');
        }

        function AjaxSend(){
            $.ajax({
                url: '/modal_add_class/',
                type: 'POST',
                data: {'title': $('#title').val()},
                success: function(data){
                    // 当服务端处理完成后，返回数据时，该函数自动调用
                    // data=服务端返回的值
                    console.log(data);
                    if(data == "ok"){
                        location.href= "/classes/";
                    }else{
                        $('#errormsg').text(data);
                    }
                }
            })
        }

        function modelEdit(ths){
            document.getElementById('shadow').classList.remove('hide');
            document.getElementById('editModal').classList.remove('hide');
            /*
            1. 获取当前点击标签
            2. 当前标签父标签，再找其上方标签
            3. 获取当前行班级名称，赋值到编辑对话框中
             */
            var row = $(ths).parent().prevAll();
            var content = $(row[0]).text();
            $('#editTitle').val(content);

            var contentId = $(row[1]).text();
            $('#editId').val(contentId);
        }


        function editAjaxSend(){

            var nid = $('#editId').val();
            var content = $('#editTitle').val();

            $.ajax({
                url:'/modal_edit_class/',
                type: 'POST',
                data: {'nid':nid, 'content': content},
                success:function(arg){
                    // arg字符串类型
                    // JSON.parse(字符串) => 对象
                    // JSON.stringify(对象) => 字符串
                    arg = JSON.parse(arg);
                    if(arg.status){
                        // location.href = "/classes/"
                        location.reload();
                    }else{
                        alert(arg.message);
                    }
                }
            })
        }
    </script>
</body>
</html>